<template>
    <page-layout>
      	<bread-crumb 
			slot="breadcrumb" 
			v-bind:breadCrumbitems="breadCrumbitems" />
        <template v-slot:pagecontent>
            <a-row>
				<a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
					<div class="product-list">			
						<a-card-grid v-for="(item,index) in productList" v-bind:key="index">
							<a-card hoverable style="width: 200px">
								 <img
			      					slot="cover"
			      					alt="item.name"
			      					:src="item.imgA" />
			      				 <a-card-meta title="Europe Street beat">
							     	<template slot="description">
							        	www.instagram.com
							      	</template>
							    </a-card-meta>	
							</a-card>
						</a-card-grid>
					</div>
				</a-col>
				<a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
					<h3 style="font-size:16px; padding-top:20px; ">促销商品</h3>
					<a-divider />
					<a-card v-for="(item,index) in hotProductList" style="width: 280px" :key="index">
						<img
					      	slot="cover"
					      	alt=""
					    	:src="item.imgA" />
    					<a-card-meta :title="' price: '+item.price+' ¥'">
					      	<template slot="description">
					    		销量：{{item.salesVolume}}
					      	</template>
					    </a-card-meta>
					</a-card>
				</a-col>				
			</a-row>
        </template>
    </page-layout>
</template>

<script>
import {
    Row,
    Col,
    Statistic,
    Card,
    Avatar,
    List,
    Button,
    Divider
} from 'ant-design-vue'
	import { mapState } from 'vuex'
import PageLayout from '@/layouts/PageLayout.vue'
import BreadCrumb from '@/components/BreadCrumb.vue'

export default {
  components: { PageLayout },
    name:"markets-supermarket",
    data(){
        return{
            msg:"markets supermarket",
            productList:[],
			hotProductList:[]
        }
    },
    mounted(){
        this.$axios.get("http://localhost:8094/product/list").then(response => {  //商品列表
            if(response.status===200){              
                this.productList=response.data;
            }
        })
        this.$axios.get("http://localhost:8094/product/hotlist").then(response => {  //热销商品列表
            if(response.status===200){              
                this.hotProductList=response.data;
            }
        })
    },
    methods:{
        getRouteBreadcrumb() {
            let routes = this.$route.matched	           
            return routes.map(function(item,index){
                return item.name;
            });
        }
    },
    computed:{
        breadCrumbitems(){           
            return this.getRouteBreadcrumb()
        }
        
    },
    components:{
        PageLayout,
        BreadCrumb,
        ARow:Row,
        ACol:Col,
        AStatistic:Statistic,
        ACard:Card,
        ACardGrid:Card.Grid,
        ACardMeta:Card.Meta,
        AAvatar:Avatar,
        AList:List,
        AListItem:List.Item,
        AListItemMeta:List.Item.Meta,
        AButton:Button,
        ADivider:Divider
    }
}
</script>